<template>
  <div class="AddOrUpdate_main add_container column_two">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="字典编码" prop="dictType">
          <el-input v-if="!id" v-model="formData.dictType" placeholder="请输入" clearable />
          <div v-else class="show">{{ formData.dictType }}</div>
        </el-form-item>
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-if="!id" v-model="formData.dictName" placeholder="请输入" clearable />
          <div v-else class="show">{{ formData.dictName }}</div>
        </el-form-item>
        <!--        <el-form-item label="备注" class="double">-->
        <!--          <el-input-->
        <!--            v-model="formData.remark"-->
        <!--            maxlength="200"-->
        <!--            show-word-limit-->
        <!--            type="textarea"-->
        <!--            placeholder="请输入"-->
        <!--          />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="状态">-->
        <!--          <el-radio-group v-model="formData.status">-->
        <!--            <el-radio label="1">启用</el-radio>-->
        <!--            <el-radio label="0">停用</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
      </el-form>
      <div class="formItem_header">
        <div class="formItem_header_operate">
          <a class="formItem_header_operate_item" @click="add1">
            <svg-icon icon-class="新增" />
            <div class="item_name">添加</div>
          </a>
          <a class="formItem_header_operate_item delete" @click="remove1">
            <svg-icon icon-class="删除" />
            <div class="item_name">删除</div>
          </a>
        </div>
      </div>
      <div ref="table_container" class="table_container">
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          style="width: 99.9%"
          :cell-class-name="cellClassName"
          :row-class-name="rowClassName"
          @selection-change="selectionChange1"
        >
          <el-table-column type="selection" align="center" width="50" />
          <el-table-column
            prop="dictLabel"
            label="字典值"
          >
            <template slot-scope="scope">
              <el-input v-if="!scope.row.isAdd" v-model="scope.row.dictLabel" placeholder="请输入" />
              <div v-else />
            </template>
          </el-table-column>
          <el-table-column
            prop="dictValue"
            label="描述"
          >
            <template slot-scope="scope">
              <el-input v-if="!scope.row.isAdd" v-model="scope.row.dictValue" placeholder="请输入" />
              <div v-else />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { add as save, edit as update, getInfo, remove } from '@/api/system/dictionary'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {}
  },
  data() {
    return {
      formData: {
        dictType: undefined,
        dictName: undefined,
        status: '1',
        remark: ''
      },
      rules: {
        dictType: [
          { required: true, message: '字典编码不能为空', trigger: 'change' }
        ],
        dictName: [
          { required: true, message: '字典名称不能为空', trigger: 'change' }
        ]
      },
      tableHeight: '250',
      tableData: [],
      selectionsAll1: []
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
      this.add1()
    } else { // 有id就是编辑
      this.getById()
    }
  },
  methods: {
    selectionChange1(rows) {
      this.selectionsAll1 = rows
    },
    add1() {
      this.tableData.push({
        dictLabel: '',
        dictValue: ''
      })
    },
    remove1() {
      this.selectionsAll1.forEach(item => {
        this.tableData.splice(this.tableData.indexOf(item), 1)
      })
    },
    addRow(row) {
      // 先删除最后一行
      this.tableData.splice(this.tableData.length - 1, 1)
      // 再新增一行有输入框的
      // 最后补上一行空的
      const row2 = [
        {
          dictLabel: '',
          dictValue: ''
        },
        {
          isAdd: true
        }
      ]
      this.tableData.push(...row2)
    },
    removeRow(row) {
      this.tableData.splice(this.tableData.indexOf(row), 1)
    },
    cellClassName(data) {
      if (data.column.property == 'operate') {
        if (data.rowIndex % 2 == 0) { // 单数行
          return 'fixed one'
        } else { // 双数行
          return 'fixed two'
        }
      }
    },
    rowClassName({ row, rowIndex }) {
      if (rowIndex == this.tableData.length - 1 && row.isAdd) {
        return 'addRow'
      }
    },
    getById() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.tableData = res.data.data
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let tag = true
          if (tag && this.tableData.length == 0) {
            this.$message({
              message: '字典明细不能为空',
              type: 'warning'
            })
            tag = false
          }
          if (tag && this.formData.dictType == 'taxRateCode') { // 限制税率只能是整数
            this.tableData.forEach(item => {
              const reg = /^[1-9]\d*$/
              if (tag && !reg.test(item.dictLabel)) {
                this.$message({
                  message: '税率只能是整数',
                  type: 'warning'
                })
                tag = false
              }
            })
          }

          if (tag == true) {
            if ((this.tableData[this.tableData.length - 1]).isAdd) {
              this.tableData.splice(this.tableData.length - 1, 1)
            }
            this.formData.data = this.tableData
            if (!this.id) { // 没有id就是新增
              save(this.formData).then(res => {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.$layer.close(this.layerid) // 关闭弹框
                this.$parent.getList() // 调用父组件的刷新方法
              })
            } else { // 有id就是编辑
              this.formData.dictId = this.id
              update(this.formData).then(res => {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.$layer.close(this.layerid) // 关闭弹框
                this.$parent.getList() // 调用父组件的刷新方法
              })
            }
          }
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    // 当前页的删除接口
    deleteMethod(deleteIds) {
      return remove(deleteIds)
    }
  }
}
</script>

<style lang="less" scoped>

.formItem_header{
  justify-content: flex-end !important;
  align-items: flex-start !important;
  height: 40px !important;
}
</style>
